<template>
	<view class="container">
		<view class="search_box">
			<view class="search_part" style="display: flex;">
				<view class="search_part_add" @click="goCity()">{{address}}</view>
				<image src="../../static/img/arrow.png" style="width:15rpx;height: 9rpx;margin-left:13rpx"></image>
				<view class="input_uni">
					<image src="../../static/img/search.png" class="search_img"></image>
					<input class="search_input" v-model="keyword" confirm-type="search" @confirm="search_key()"  placeholder="想找点什么？" placeholder-style="font-size:25rpx;color:#999595" />
				</view>
				<!-- <navigator url="/pages/issueSelect/issueSelect">
					
				</navigator> -->
				<view @click="gofabu" class="uni_image">
					发布
					<!-- <image src="../../static/img/up.png" style="width: 33rpx;height: 33rpx;"></image> -->
				</view>
			</view>
		</view>
		<view class="advertise_part">
			<view class="title">
				<!-- <vTabs
				  :tabs="advertiseTitles"
				  height="45px"
				  v-model="activeTab"
				  color="#333"
				  activeColor="#FB8408"
				  fontSize="14px"
				  activeFontSize="16px"
				  lineHeight="4px"
				  :lineScale="0.8"
				  lineColor="#FB8408"
				  @change="tabchage(activeTab)"
				/> -->
				<s-tabs slot-title :nav-per-view="5" v-model="activeTab"  @change="tabchage(activeTab)">
					<s-tab v-for="item of advertiseTitles" :key="item">{{item}}</s-tab>
				</s-tabs>

			</view>
			<view class="advertise_persons">
				<view class="person" v-for="(item,index) in persons" @click="jobdetial(item)" :key="index">
					<image v-if="item.positionFile" :src="item.positionFile[0]?item.positionFile[0] : require('../../static/img/recruit.jpg')" class="img"></image>
					<view class="name">
						{{item.title}}
					</view>
					<view class="distance" v-if="item.distance">相距 {{item.distance.toFixed(2)}} 千米</view>
					<view class="flex_start sign_up_box">
						<view class="">
							￥{{item.salary}}
						</view>
						<view class="sign_up_btn" @click.stop="jobdetial(item)">报名</view>
					</view>
					<view class="distance" v-if="item.joinNum">已有{{item.joinNum}}人参加</view>
				</view>
			</view>
		</view>
		<view class="live_enter" @click="goLiveList">
			<image src="../../static/img/livedetail.png" class="live_enter_png"></image>
		</view>
		<view class="blank"></view>
		<view class="services">
			<view class="service_item" v-for="(item,index) in TypeList" @click="joblist(item.type,item.id)" :key="index">
				<image :src="item.image"></image>
				<view class="">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="emotion_part">
			<view @click="emotion('look',2)">
				<image src="../../static/img/sou.png"></image>
			</view>
			<view>
				<image src="../../static/img/video.png"></image>
			</view>
			<view class="no_positon_img" @click="toCooperation">
				<image src="../../static/img/carpooling.png"></image>
			</view>
			<view @click="emotion('emo',1)">
				<image src="../../static/img/emotion.png"></image>
			</view>
		</view>
		<view class="employ_info">
			<view class="title_part">
				<view style="display: flex;">
					<view class="yellow_line"></view>
					<view class="title">
						招聘信息
					</view>
				</view>

				<image src="../../static/img/arrowRight.png" mode=""></image>
			</view>
			<view class="employ_list">
				<view class="employ_part" v-if="employList"  v-for="(item,index) in employList" :key="index">
					<view class="left">
						<view class="name">
							{{item.title}}
						</view>
						<view class="distance_address">
							 &nbsp;&nbsp;{{item.address}}
						</view>
						<view class="types">
							<view class="type_item" v-for="(type,i) in item.positionLabel" :key="i" v-if="i<4">
								{{type}}
							</view>
						</view>
						<view class="company_person">
							<image :src="item.avatar?  item.avatar:'../../static/img/myCenter/girl.png'"></image>
							<text>{{item.nickname}}&nbsp;|&nbsp;招聘者</text>
						</view>
					</view>
					
					<view class="right">
						<view class="distance_address">
							{{item.publishType}}
						</view>
						<view class="money">
							￥{{item.salary}}元
						</view>
						<view class="distance" v-if="item.joinNum">已有{{item.joinNum}}人参加</view>
						<view class="go_rob"  @click="jobdetial(item)">
							抢单
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 实时单人口 -->
		<image src="../../static/img/orderEntry.png" mode="" class="order_entry" @click="goshishi"></image>
	</view>
</template>

<script>
	import sTabs from '@/components/s-tabs';
	import sTab from '@/components/s-tab';
	export default {
		data() {
			return {
				dimension:'',
				longitude:'',
				userinfo: {},
				advertiseTitles: ["日结工", "钟点工", "附近", "短期工", "全职招聘","长期工","预约工","我要用车","实时用工",],
				activeTab:0,
				// activeIndex: 0,
				address:"未知",
				publishType:"日结工",
				keyword:"",
				persons: [{
						img: "../../static/img/persion.png",
						name: "招聘文员",
						price: "3k-6k"
					},
					{
						img: "../../static/img/persion.png",
						name: "招聘文员",
						price: "3k-6k"
					},
					{
						img: "../../static/img/persion.png",
						name: "招聘文员",
						price: "3k-6k"
					},
				],
				employList: [],
				TypeList: [{
					image: "../../static/img/home1.png",
					name: "顺风车",
					type: "1"
				},
				{
					image: "../../static/img/home2.png",
					name: "拉货搬家",
					type: "1"
				},
				]
		  }
		},
		components: {
			sTabs,sTab
		},
		onShow() {
			if (this.activeTab == 2) {
				this.getNear()
			} else{
				this.getRecruitList()
			}
			uni.getLocation({
				type: 'wgs84 ',
				geocode:true,
				success: (res)=> {
					this.dimension = res.latitude 
					this.longitude = res.longitude
				}
			});
			if (uni.getStorageSync('addr')) {
				this.address  = uni.getStorageSync('addr')
			} else {
				uni.getLocation({
					type: 'wgs84 ',
					geocode:true,
					success: (res)=> {
						if(res.address){
							uni.setStorageSync('addr',res.address.city)
							this.address  = uni.getStorageSync('addr')
						}
					},
					fail: function (e) {
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon:'none'
						});
					}
				});
			}
		},
		onLoad() {
			this.getpositionType()
		},
		methods: {
			goLiveList () {
				uni.navigateTo({
					url:'/pages/liveList/liveList'})
			},
			getNear(){
				var dataone = []
				var datatwo = []
				this.$utils.requert({url:'nearby',type:'post',data:{
					dimension: this.dimension,
					longitude: this.longitude,
					type: 1,
				}}).then(res=>{
					if(res.code === 1 ){
						let datas = res.data
						dataone = dataone.concat(datas)
						datatwo = datatwo.concat(datas.slice(0,3))
						this.$utils.requert({url:'nearby',type:'post',data:{
							dimension: this.dimension,
							longitude: this.longitude,
							type: 2,
						}}).then(resTwo=>{
							if(resTwo.code === 1 ){
								let datastwo = resTwo.data
								dataone = dataone.concat(datastwo)
								datatwo = datatwo.concat(datastwo.slice(0,3))
								datatwo.forEach(element => {
									element.positionFile = JSON.parse(element.positionFile)
									element.positionLabel = element.positionLabel.split(',')
								})
								dataone.forEach(element => {
									if (typeof element.positionLabel == 'string') {
									element.positionLabel = element.positionLabel.split(',')
									}
								})
								this.persons = datatwo
								this.employList = dataone
							}else{    
								this.$utils.showLayer(resTwo.message)
							}
						})
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			},
			signUp(id){
				let userinfo = uni.getStorageSync('userinfo');
				if (userinfo.worker == 0) {
					uni.showToast({
						title: '未进行个人认证，即将跳转至认证页面，认证后即可报名',
						duration: 2000,
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/selsectIdentity/selsectIdentity'
						});
					}, 2000);
				} else if (userinfo.worker == 1) {
					this.recruitJoin(id)
				} else if (userinfo.worker == -1) {
					uni.showToast({
						title: '您的认证信息还在审核中，请耐心等待',
						duration: 2000,
						icon: 'none'
					});
				}
			},
		//直接报名
		recruitJoin(id) {
			let type = ''
			if (this.activeTab == 8) {
				type = 'realtime'
			}else {
				type = 'public'
			}
			if (type == 'public') {
				this.$utils.requert({ url: 'recruitJoin', data: { recruitId: id }, type: 'post' }).then(res => {
					if (res.code === 1) {
						this.$utils.showLayer(res.message);
					} else {
						this.$utils.showLayer(res.message);
					}
				});
			}else if(type =='realtime'){ //实时用工
				this.$utils.requert({ url: 'timeOrderAccept', data: { orderId: id }, type: 'post' }).then(res => {
					if (res.code === 1) {
						this.$utils.showLayer(res.message);
					} else {
						this.$utils.showLayer(res.message);
					}
				});
			}
		},
			toCooperation(){
				uni.navigateTo({
					url:'/pages/cooperation/cooperation'
				})
			},
			// 职位类型获取
			getpositionType(){
				this.$utils.requert({url:'positionType',type:'post'}).then(res=>{
					if(res.code === 1 ){
						let datas = res.data
						datas.forEach((element)=>{
							element.image = this.$utils.mainName + element.image
						})
						this.TypeList = this.TypeList.concat(datas)
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			},
			goshishi() {
				uni.navigateTo({
					url:'/pages/actualJob/actualJob'
				})
			},
			goCity() {
				uni.navigateTo({
						url:'/pages/cityList/cityList'
				})
			 },
			gofabu () {
				this.userinfo = uni.getStorageSync('userinfo')
				this.userinfo.boss = 1
				if (this.userinfo.boss == 0 ) {
					uni.showToast({
						title: '未认证，即将跳转至认证页面，认证后即可发布',
						duration: 2000,
						icon: 'none'
					});
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/selsectIdentity/selsectIdentity'
						})
					},2000)
				} else if (this.userinfo.boss == 1) {
					uni.navigateTo({
						url:"/pages/issueSelect/issueSelect"
					})
				} else if (this.userinfo.boss == -1) {
					uni.showToast({
						title: '您的认证信息还在审核中，请耐心等待',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			//关键字搜索跳转
			search_key(){
				uni.navigateTo({
					url:"/pages/jobList/jobList?keyword=" + this.keyword
				})
			},
			joblist(type,id){
				if(type == 1){
					uni.navigateTo({
						url:"/pages/actualJob/actualJob"
					})
				}else{
					uni.navigateTo({
						url:"/pages/jobList/jobList?id="+id
					})
				}
			},
			getRecruitList(){
				let data = {
					page:1,
					publishType:this.publishType,
					pageSize:6,
				}
				if (this.activeTab == 8) {
					this.$utils.requert({url:'timeOrderList',type:'post',data:{
							page:1,
							pageSize:6,
							status: 0
					}}).then(res=>{
						if(res.code === 1 ){
							// this.$utils.showLayer(res.message)
							this.persons = res.data.data
							//招聘信息暂时的数据处理
							this.persons.forEach((element)=>{
								element.positionLabel = element.positionLabel.split(',')
							})
							this.employList =  this.persons
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
				} else {
					this.$utils.requert({url:'RecruitMsg',type:'post',data:data}).then(res=>{
						if(res.code === 1 ){
							// this.$utils.showLayer(res.message)
							this.persons = res.data.data
							//招聘信息暂时的数据处理
							this.employList =  this.persons
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
				}
			},
			tabchage(activeTab) {
				this.publishType = this.advertiseTitles[activeTab]
				if (activeTab == 2) {
					 this.getNear()
				} else {
					this.getRecruitList()
				}
			},
			jobdetial(item){
				let query = 'id=' + item.id
				if (this.activeTab == 8 || (this.activeTab == 2 && item.publishType=='实时用工')) {
					query = query + '&type=realtime'
				}else {
					query = query + '&type=public'
				}
				uni.navigateTo({
					url:'/pages/jobDetail/jobDetail?' + query
				})
			},
			emotion(selectItem,type){
				uni.navigateTo({
					url:'/pages/emotionalCornerList/emotionalCornerList?type='+type+'&selectItem='+selectItem
				})
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.sign_up_box{
		justify-content: space-between;
	}
	.sign_up_btn{
		padding: 3rpx 18rpx;
		color: white;
		font-size: 24rpx;
		border-radius: 8rpx;
		background: #FB8408;
	}
	.container {
		width: 100%;
		padding-bottom: 60rpx;
	}

	.blank {
		height: 20rpx;
		background-color: #f5f4f6;
	}

	.search_box {
		width: 100%;
		height: 175rpx;
		background: #fd9103;
		font-size: 28rpx;
		color: #fff;
		box-sizing: border-box;
		padding: 90rpx 23rpx 33rpx;
	}

	.search_part {
		display: flex;
		width: 100%;
		height: 65rpx;
		align-items: center;
	}
	.search_part_add{
		overflow:hidden;
		white-space:nowrap; 
		text-overflow:ellipsis;
		width: 3em;
	}
	.input_uni {
		position: relative;
	}

	.search_input {
		width: 490rpx;
		height: 65rpx;
		border-radius: 70rpx;
		background-color: #fff;
		font-size: 25rpx;
		color: #333333;
		padding-left: 59rpx;
		line-height: 65rpx;
		
		margin: 0 20rpx;
		box-sizing: border-box;
	}

	.search_img {
		position: absolute;
		left: 40rpx;
		width: 25rpx;
		height: 25rpx;
		top: 22rpx;
	}

	.advertise_part {
		padding: 0 24rpx
	}

	.advertise_part .title {
		display: flex;
		justify-content: space-around;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		color: #333333
	}

	.active_click {
		font-size: 33rpx;
		color: #FF8405
	}

	.advertise_persons {
		display: flex;
		flex-wrap: wrap;
		font-size: 22rpx;
		color: #FB8408;
	}
	.distance{
		font-size: 22rpx;
		color: #999999;
		margin: 10rpx 0;
	}
	.advertise_persons .person {
		margin-bottom: 20rpx;
		margin-right: 17rpx;
	}

	.advertise_persons .person:nth-child(3n) {
		margin-right: 0px;
	}

	.advertise_persons .img {
		width: 223rpx;
		height: 298rpx;
		border-radius: 14rpx;
	}

	.advertise_persons .name {
		font-size: 24rpx;
		color: #333333;
		margin: 10rpx 0;
		width: 223rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.live_enter {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
	}

	.live_enter_png {
		width: 100%;
		height: 140rpx;
	}
	.services {
		padding: 50rpx 24rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.services .service_item {
		width: 100rpx;
		font-size: 25rpx;
		color: #333333;
		text-align: center;
		margin-right: 50rpx;
		margin-bottom: 30rpx;
	}

	.services .service_item:nth-child(5n) {
		margin-right: 0
	}

	.service_item image {
		width: 46rpx;
		height: 40rpx;
		margin-bottom: 20rpx;
	}

	.emotion_part {
		padding: 0 24rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 32rpx;
		color: #Fff;
	}

	.emotion_part view {
		width: 335rpx;
		height: 142rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}

	.emotion_part view:nth-child(2n) {
		margin-right: 0;
	}

	.emotion_part image {
		width: 100%;
		height: 100%;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}

	.emotion_part image:nth-child(2) {
		margin-right: 0;
	}

	.emotion_part image:nth-child(3) {
		margin-right: 0;
	}

	.no_positon_img {
		width: 334rpx;
		height: 141rpx;
		background: linear-gradient(270deg, rgba(86, 202, 242, 1) 0%, rgba(48, 131, 237, 1) 100%);
		border-radius: 14rpx;
		/* line-height: 141rpx; */
		text-align: center;
	}

	.employ_info {
		padding: 0 35rpx;
	}
	.employ_info .title_part {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 33rpx;
		color: #323232;
		margin-bottom: 25rpx;
		
	}

	.employ_info .title_part image {
		width: 14rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.yellow_line {
		width: 10rpx;
		height: 35rpx;
		background-color: #F9A02A;
		border-radius: 40rpx;
		margin-top: 8rpx;
		margin-right: 11rpx;
	}
	.employ_part{
		padding:40rpx 0;
		border-top:1rpx solid #f6f6f6;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.employ_part .name{
		font-size: 31rpx;
		color:#323232;
	}
	 .distance_address{
		font-size: 24rpx;
		color: #838282;
	}
	.left{
		flex: 1;
	 width: 20%;
	}
	.left .distance_address{
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.employ_part .types{
		display: flex;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		flex-wrap: wrap;
	}
	.employ_part .types .type_item{
		padding:0 8rpx;
		border:1rpx solid #f6f6f6;
		font-size: 25rpx;
		color: #FB8408;
		margin-right: 16rpx;
		flex-shrink: 0;
		margin-bottom: 15rpx;
	}
	.employ_part .types .type_item:nth-child(2){
		color: #3185ed;
	}
	.employ_part .types .type_item:nth-child(3){
		color: #fd4f44;
	}
	.company_person{
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}
	.company_person image{
		width:42rpx;
		height: 42rpx;
		margin-right: 17rpx;
		border-radius: 50%;
	}
	.right{
	 text-align: right;
	 flex-shrink: 0;
	 width: 20%;
	}
	.right .money{
		font-size: 28rpx;
		color:#FB8408;
	}
	.order_entry{
		width: 110rpx;
		height: 110rpx;
	    position: fixed;
		top:960rpx;
		right: 20rpx;
	}
	.go_rob{
		width: 137rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		color:#Fff;
		background-color: #FFA008;
		font-size: 28rpx;
		position: absolute;
		bottom: 40rpx;
		right: 0;
		border-radius: 7rpx;
	}
	.uni_image{
		position: absolute;
		right: 30rpx;
	}
</style>
